<template>
    <div class="mine-user">
        <div class="mine-info" :style="{'background':bgColor}">
            <div class="not" v-show="!userInfo">
                <span class="txt" @click="onLogin">未登录,请点击去登录吧</span>
            </div>
            <div class="success" v-show="userInfo">
                <div class="user">
                    <div class="avatar">
                        <mine-image width="1.3rem" height="1.3rem" radius="1.3rem" fit="cover" :src="userInfo.avatar"></mine-image>
                    </div>
                    <div class="info">
                        <span class="name">{{userInfo.nickname}}</span>
                        <span class="id">ID:{{userInfo.id}}</span>
                    </div>
                    <div class="edit">
                        <span class="btn" @click="onEdit">修改资料</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MineImage from '../Common/Image/Index'
import { mapState } from 'vuex'
export default {
    name: 'MineUser',
    components: {
        MineImage
    },
    methods: {
        onLogin() {
            this.$store.commit('setAnimate','turn-on')
            this.$router.push('/login')
        },
        onEdit() {
            this.$store.commit('setAnimate','turn-on')
            this.$router.push('/mine/profile')
        }
    },
    computed: {
        ...mapState(['userInfo']),
        bgColor() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].bgColor
        }
    }
}
</script>

<style scoped>
.mine-warp .mine-info{
    padding:0.2rem 0.3rem;
    color:#fff;
    border-radius:0 0 0.6rem 0.6rem;
}
.mine-warp .mine-info .not{
    padding:0.7rem 0;
    font-size:0.32rem;
    text-align: center;
    font-weight:600;
}
.mine-warp .mine-info .success{
    padding:0.2rem 0 0.22rem 0;
}
.mine-warp .mine-info .success .user{
    display: flex;
    align-items: center;
    justify-content:space-between;
}
.mine-warp .mine-info .success .user .avatar{
    width:1.4rem;
    height:1.4rem;
    overflow: hidden;
}
.mine-warp .mine-info .success .user .info{
    flex:1;
    margin-left:0.2rem;
    font-size:0.36rem;
}
.mine-warp .mine-info .success .user .info .name{
    display: block;
    margin-bottom:0.2rem;
    font-weight:600;
}
.mine-warp .mine-info .success .user .edit .btn{
    font-size:0.30rem;
}
</style>